<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="我的绩效-定制化" data-page-identification="y_auhlddz3b2">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_rcfj0qms3u 自定义模板_05pakhlynd -->
      <a-modal title="项目月度绩效总分详情" v-model:visible="reasonState.visible" centered :body-style="{ padding: '15px 24px' }" width="700px" :footer="null">
        <div class="detail-top-title">
          <div class="detail-first">项目目标整体扣分：</div>
          <div class="red-weight">{{ reasonState.totalDeductFraction }}</div>
          <div class="detail-second">高层修正目标结果加减分：</div>
          <div :class="['litter', Number(reasonState.correctFraction) < 0 ? 'red-weight' : 'green-font']">{{
                        reasonState.correctFraction
          }}</div>
        </div>
        <div class="detail-item">当月计划完成未关联目标任务导致扣分</div>
        <div class="default-table" style="margin: 0">
          <a-table bordered :pagination="false" :columns="reasonState.columns" :data-source="reasonState.isSelfData" v-if="reasonState.isSelfData && reasonState.isSelfData.length > 0">
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.dataIndex === 'taskPerformanceWeight'">
                <!--                                <div v-if="record.taskPerformanceWeight > 0" class="green-font">+{{ record.taskPerformanceWeight }}</div>-->
                <div class="red-font">-{{ record.taskPerformanceWeight }}</div>
                <!--                                <div v-else class="red-font">{{ record.taskPerformanceWeight }}</div>-->
              </template>
            </template>
          </a-table>
        </div>
        <div class="detail-item">他人未完成任务导致扣分</div>
        <div class="default-table" style="margin: 0">
          <a-table bordered :pagination="false" :columns="reasonState.columns" :data-source="reasonState.otherData" v-if="reasonState.otherData && reasonState.otherData.length > 0">
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.dataIndex === 'taskPerformanceWeight'">
                <!--                                <div v-if="record.taskPerformanceWeight > 0" class="green-font">+{{ record.taskPerformanceWeight }}</div>-->
                <div class="red-font">-{{ record.taskPerformanceWeight }}</div>
                <!--                                <div v-else class="red-font">{{ record.taskPerformanceWeight }}</div>-->
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <div class="jx-detail">
        <div class="detail-top">
          <div class="detail-title">{{ ygState.dateStr }}绩效列表</div>
          <div class="detail-title">
            <a-date-picker
              v-model:value="detailState.detailDate"
              picker="month"
              value-format="YYYY-MM"
              style="width: 300px; margin-left: 10px"
              @change="handlerChangeDate"
              :allowClear="false"
              :disabled-date="disabledDate"
            />
          </div>
        </div>
        <!--                    个人信息      -->
        <div :class="['detail-msg', { short: !isCurrentMonth() }]">
          <div class="other">
            <div class="other-top">
              <div class="other-top-item">
                <span class="people-name">{{ detailState.peopleDetail.userName }}</span>
                <span class="department-title">{{ detailState.peopleDetail.departmentName }}</span>
                <span class="title-tip" v-if="detailState.peopleDetail.templateProjectPm">--模板项目项目经理</span>
                <span class="title-tip" v-if="detailState.peopleDetail.otherProjectPm">--非模板项目项目经理</span>
              </div>
            </div>
            <div class="other-middle" v-if="isCurrentMonth()"
              ><BellFilled style="color: #f7b500; margin-right: 8px" /> 绩效成绩每日0点试算，不代表最终成绩，超过自然月后，由领导手动生成绩效成绩覆盖试运算成绩。</div
            >
            <div class="other-bottom">
              <div class="other-bottom-item">
                <span class="normal-font">最终绩效分数</span>
                <span class="weight-font color-font">{{
                                    detailState.peopleDetail.finalPerformanceScore
                }}</span>

                <a-tooltip
                  :overlay-style="{
                                        maxWidth: '500px'
                                    }"
                >
                  <template #title
                    >通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分+日报、全勤最终绩效分数+月度修正得分；<br />

                    如果用户为水泥配料模板项目项目经理，该用户的项目核算分（通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分）将乘以70%，剩余30%的项目绩效成绩将由业务专家和项目总监各自负责15%（最多15分，最少0分）的绩效打分；<br />

                    如果用户为水泥配送、煤炭供应链项目经理或漳县试点项目经理，该用户的项目核算分（通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分）将乘以70%，剩余30%的项目绩效成绩将由项目总监负责30%（最多30分，最少0分）的绩效打分；
                  </template>
                  <ExclamationCircleOutlined style="margin-left: 4px; top: 8px" class="" />
                </a-tooltip>
              </div>
              <!--               项目总监评分                       -->
              <div
                class="other-bottom-item"
                v-if="
                                    detailState.peopleDetail.templateProjectPm ||
                                    detailState.peopleDetail.otherProjectPm
                                "
              >
                <span class="normal-font">项目总监评分</span>
                <span class="weight-font" v-if="detailState.peopleDetail.projectDirectorFraction">{{
                                    detailState.peopleDetail.projectDirectorFraction
                }}</span>
                <span class="weight-font" style="font-size: 16px" v-else>待评分</span>
                <span class="unit-font" v-if="detailState.peopleDetail.projectDirectorFraction">分</span>
              </div>
              <!--               项目总监评分                       -->
              <!--               业务专家评分                       -->
              <div class="other-bottom-item" v-if="detailState.peopleDetail.templateProjectPm">
                <span class="normal-font">业务专家评分</span>
                <span class="weight-font" v-if="detailState.peopleDetail.businessExpertFraction">{{
                                    detailState.peopleDetail.businessExpertFraction
                }}</span>
                <span class="weight-font" style="font-size: 16px" v-else>待评分</span>
                <span class="unit-font" v-if="detailState.peopleDetail.businessExpertFraction">分</span>
              </div>
              <!--               业务专家评分                       -->
              <!--                              本月参与项目-->
              <div class="other-bottom-item">
                <span class="normal-font">本月参加项目数</span>
                <span class="weight-font">{{ detailState.peopleDetail.projectNum || 0 }}</span>
                <span class="unit-font">个</span>
              </div>

              <!--                              本月参与项目-->
              <!--                              本月参与目标-->
              <div class="other-bottom-item">
                <span class="normal-font">本月参加目标数</span>
                <span class="weight-font">{{ detailState.peopleDetail.goalsNum || 0 }}</span>
                <span class="unit-font">个</span>
              </div>
              <!--                              本月参与目标-->
              <!--                              本月参与任务-->
              <div class="other-bottom-item">
                <span class="normal-font">本月参加任务数</span>
                <span class="weight-font">{{ detailState.peopleDetail.taskNum || 0 }}</span>
                <span class="unit-font">个</span>
              </div>
              <!--                              本月参与任务-->
              <!--                              任务工时-->
              <div class="other-bottom-item">
                <span class="normal-font">任务工时</span>
                <span class="weight-font">{{ detailState.peopleDetail.taskHourInput || 0 }}</span>
                <span class="unit-font">天</span>
                <span class="end-font">/{{ detailState.peopleDetail.currentMonthHourInput || 0 }}</span>
                <span class="unit-font">天</span>
              </div>
              <!--                              任务工时-->
              <!--                              其他日报工时-->
              <div class="other-bottom-item">
                <span class="normal-font">其他日报工时</span>
                <span class="weight-font">{{ detailState.peopleDetail.otherDailyHourInput || 0 }}</span>
                <span class="unit-font">天</span>
                <span class="end-font">/{{ detailState.peopleDetail.currentMonthHourInput || 0 }}</span>
                <span class="unit-font">天</span>
              </div>
              <!--                              其他日报工时-->
            </div>
          </div>
        </div>
        <!--                    个人信息      -->
        <!--                     平台、市场、交付-通用项目     -->
        <div class="default-div">
          <!--                            标题-->
          <div class="default-title">
            <div class="default-title-img"></div>
            <div class="title-type">平台、市场、交付-通用项目</div>
            <div class="title-line"></div>
            <div class="title-workHour">
              <span class="title-normal-font">整体工时占比：</span>
              <span class="title-weight-font">{{ detailState.defaultDetail.overallWorkHourRatio }}</span>
              <a-tooltip :overlayStyle="overlayStyle">
                <template #title>通用项目投入总工时/全部项目工时投入(已排除其他日报工时)</template>
                <ExclamationCircleOutlined style="margin-left: 4px" />
              </a-tooltip>
            </div>
            <div class="title-score">
              <span class="title-normal-font">项目最终绩效总分数：</span>
              <span class="title-weight-font">{{ detailState.defaultDetail.performanceScore }}分</span>
            </div>
            <div class="title-performance">
              <span class="title-normal-font">最终绩效分数：</span>
              <span class="title-weight-font blue-font">{{ detailState.defaultDetail.finalPerformanceScore }}分</span>
              <a-tooltip :overlayStyle="overlayStyle">
                <template #title>整体工时占比*通用项目绩效分数</template>
                <ExclamationCircleOutlined style="margin-left: 4px" />
              </a-tooltip>
            </div>
          </div>
          <!--                            标题-->
          <!--                            内容-->
          <div
            class="default-content"
            v-if="
                            detailState.defaultDetail.employeeMonthlyGoalsDtoList &&
                            detailState.defaultDetail.employeeMonthlyGoalsDtoList.length > 0
                        "
          >
            <div class="content-title">
              <div class="title-normal-font">项目名称</div>
              <div class="title-normal-font">角色</div>
              <div class="title-normal-font"
                >项目最终绩效分数
                <a-tooltip :overlayStyle="overlayStyle">
                  <template #title
                    >团队负责人/负责人=项目月度绩效总分*通用项目下工时占比<br />
                    执行人=（项目月度绩效总分*0.2+工时分*0.8）*通用项目下工时占比</template
                  >
                  <ExclamationCircleOutlined style="margin-left: 4px" />
                </a-tooltip>
              </div>
              <div class="title-normal-font">项目月度绩效总分</div>
              <div class="title-normal-font"
                >工时占比分
                <a-tooltip :overlayStyle="overlayStyle">
                  <template #title>此项目下已完成任务工时/此项目投入任务工时</template>
                  <ExclamationCircleOutlined style="margin-left: 4px" />
                </a-tooltip>
              </div>
              <div class="title-normal-font">此项目投入任务总工时(h)</div>
              <div class="title-normal-font"
                >通用项目下工时占比
                <a-tooltip>
                  <template #title>此项目工时投入/全部项目工时投入(已排除其他日报工时)</template>
                  <ExclamationCircleOutlined style="margin-left: 4px" />
                </a-tooltip>
              </div>
            </div>
            <a-collapse v-model:activeKey="detailState.defaultDetail.activeKey" :bordered="false" expandIconPosition="right">
              <template #expandIcon="{ isActive }">
                <DownSquareOutlined v-if="!isActive" style="font-size: 16px; color: #595959" />
                <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
              </template>
              <a-collapse-panel v-for="(item, index) in detailState.defaultDetail.employeeMonthlyGoalsDtoList" :key="index">
                <template #header>
                  <div class="collapse-title">
                    <a-tooltip>
                      <template #title>{{ item.projectName }} </template>
                      <div class="collapse-weight-font">
                        <span class="too-long">{{ item.projectName }}</span>
                      </div>
                    </a-tooltip>

                    <div class="collapse-weight-font">{{ item.role }}</div>
                    <div class="collapse-weight-font">{{ item.projectPerformanceScore }}</div>
                    <div>
                      <span :class="getClass(item.projectScore)" @click.stop="getScoreReason(item.id)">{{ item.projectScore }}</span></div
                    >
                    <div class="collapse-weight-font">{{ item.workHourScore }}</div>
                    <div class="collapse-weight-font">{{ item.goalsHour }}</div>
                    <div class="collapse-weight-font">{{ item.projectFractionRatio }}</div>
                  </div>
                </template>
                <div class="default-table">
                  <a-table :scroll="{ y: 200 }" bordered :columns="defaultColumns" :data-source="item.taskDtoList" :pagination="false" />
                </div>
              </a-collapse-panel>
            </a-collapse>
          </div>
          <!--                            内容-->
        </div>
        <!--                     平台、市场、交付-通用项目     -->

        <!--                          交付模板项目-->
        <div class="template-div">
          <!--                            标题-->
          <div class="template-title">
            <div class="template-title-img"></div>
            <div class="title-type">交付-模版项目</div>
            <div class="title-line"></div>
            <div class="title-workHour">
              <span class="title-normal-font">整体工时占比：</span>
              <span class="title-weight-font">{{ detailState.templateDetail.overallWorkHourRatio }}</span>
              <a-tooltip :overlayStyle="overlayStyle">
                <template #title>交付模板项目投入总工时/全部项目工时投入(已排除其他日报工时)</template>
                <ExclamationCircleOutlined style="margin-left: 4px" />
              </a-tooltip>
            </div>
            <div class="title-score">
              <span class="title-normal-font">模板项目最终绩效分数：</span>
              <span class="title-weight-font">{{ detailState.templateDetail.performanceScore }}分</span>
            </div>
            <div class="title-performance">
              <span class="title-normal-font">最终绩效分数：</span>
              <span class="title-weight-font blue-font">{{ detailState.templateDetail.templateProjectFinalPerformance }}分</span>
              <a-tooltip :overlayStyle="overlayStyle">
                <template #title>整体工时占比*模板项目绩效分数</template>
                <ExclamationCircleOutlined style="margin-left: 4px" />
              </a-tooltip>
            </div>
          </div>
          <!--                            标题-->
          <!--                            内容-->
          <div
            class="template-content"
            v-if="
                            detailState.templateDetail.templateProjectPerformanceDtoList &&
                            detailState.templateDetail.templateProjectPerformanceDtoList.length > 0
                        "
          >
            <div class="template-content-title">
              <div class="title-normal-font">项目名称</div>
              <div class="title-normal-font">加减分</div>
              <div class="title-normal-font">此项目投入任务总工时(h) </div>
            </div>
            <a-collapse v-model:activeKey="detailState.templateDetail.activeKey" :bordered="false" expandIconPosition="right">
              <template #expandIcon="{ isActive }">
                <DownSquareOutlined v-if="!isActive" style="font-size: 16px; color: #595959" />
                <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
              </template>
              <a-collapse-panel v-for="(item, index) in detailState.templateDetail.templateProjectPerformanceDtoList" :key="index">
                <template #header>
                  <div class="template-collapse-title">
                    <a-tooltip>
                      <template #title>{{ item.projectName }} </template>
                      <div class="collapse-weight-font">
                        <span class="template-too-long">{{ item.projectName }}</span>
                      </div>
                    </a-tooltip>

                    <div v-if="item.scoreChange > 0" class="collapse-weight-font green-font">+{{ item.scoreChange }}</div>
                    <div v-else class="collapse-weight-font red-font">{{ item.scoreChange }}</div>
                    <div class="collapse-weight-font">{{ item.projectInputHours }}</div>
                  </div>
                </template>
                <div class="default-table">
                  <a-table :pagination="false" bordered :columns="templateColumns" :data-source="item.taskDtoList" :scroll="{ y: 200 }" />
                  <a-table v-if="false" :pagination="false" bordered :columns="noTemplateColumns" :data-source="item.taskDtoList" :scroll="{ y: 200 }" />
                </div>
              </a-collapse-panel>
            </a-collapse>
          </div>
          <!--                            内容-->
        </div>
        <!--                          交付模板项目-->
        <!--                          无模板项目-->
        <div class="template-div">
          <!--                            标题-->
          <div class="template-title">
            <div class="no-template-title-img">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                <title>编组 46</title>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="编组-46">
                    <rect id="矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="24" height="24" />
                    <g id="编组-45" transform="translate(0.5, 0)" fill-rule="nonzero">
                      <path
                        d="M0,4.57142858 C0,2.04669829 2.04669829,0 4.57142858,0 L18.2857143,0 C20.8104446,0 22.8571429,2.04669829 22.8571429,4.57142858 L22.8571429,19.4285714 C22.8571429,21.9533017 20.8104446,24 18.2857143,24 L4.57142858,24 C2.04669829,24 0,21.9533017 0,19.4285714 L0,4.57142858 Z"
                        id="路径"
                        fill="#366DEB"
                      />
                      <path
                        d="M0,4.57142858 C0,2.04669829 2.04669829,0 4.57142858,0 L18.2857143,0 C20.8104446,0 22.8571429,2.04669829 22.8571429,4.57142858 L22.8571429,14.8571429 C22.8571429,17.3818731 20.8104446,19.4285714 18.2857143,19.4285714 L4.57142858,19.4285714 C2.0466983,19.4285714 0,17.3818731 0,14.8571429 L0,4.57142858 Z"
                        id="路径"
                        fill="#366DEB"
                      />
                      <path
                        d="M0,5.93537141 C0,3.87204345 0.889198283,1.0671286 3,1.0671286 L8.85660016,1.0671286 C10.2223347,1.06659582 10.7459775,1.77876493 11.4285714,2.93507871 L18.270936,2.93507871 C20.8036688,2.93507871 22.8571429,6.07471983 22.8571429,8.55048921 L22.8571429,18.5840919 C22.8571429,21.0598614 20.8036687,23.0671286 18.270936,23.0671286 L4.58620688,23.0671286 C2.05347411,23.0671286 0,21.0598613 0,18.5840919 L0,5.93537141 Z"
                        id="路径备份-8"
                        fill="#6896FF"
                        opacity="0.3"
                      />
                      <path
                        d="M0,8.2715297 C0,6.48956581 0.889198283,4.06714091 3,4.06714091 L8.85660016,4.06714091 C10.2223347,4.06668078 10.7459775,4.68173552 11.4285714,5.68036951 L18.270936,5.68036951 C20.8036688,5.68036951 22.8571429,8.39187599 22.8571429,10.5300391 L22.8571429,19.1954176 C22.8571429,21.3335807 20.8036687,23.0671286 18.270936,23.0671286 L4.58620688,23.0671286 C2.05347411,23.0671286 0,21.3335807 0,19.1954176 L0,8.2715297 Z"
                        id="路径备份-8"
                        fill="#6896FF"
                      />
                      <g id="编组-3" transform="translate(3, 9)" fill="#FFFFFF">
                        <path
                          d="M0,0.5 C0,0.367391766 0.0752548718,0.240214806 0.209209426,0.146446614 C0.343163981,0.0526784222 0.524845349,0 0.714285701,0 L9.28571425,0 C9.54090397,0 9.77670899,0.0952994524 9.90430385,0.249999994 C10.0318987,0.404700535 10.0318987,0.595299465 9.90430385,0.750000006 C9.77670899,0.904700548 9.54090397,1 9.28571425,1 L0.714285701,1 C0.319796601,1 0,0.77614238 0,0.5 L0,0.5 Z"
                          id="路径"
                        />
                        <path
                          d="M0,3.5 C0,3.22385763 0.317131631,3 0.708333322,3 L16.2916667,3 C16.6828684,3 17,3.22385763 17,3.5 C17,3.77614237 16.6828684,4 16.2916667,4 L0.708333322,4 C0.317131631,4 0,3.77614237 0,3.5 L0,3.5 Z"
                          id="路径"
                        />
                        <path
                          d="M0,6.5 C0,6.22385762 0.31713163,6 0.708333322,6 L16.2916667,6 C16.6828684,6 17,6.22385763 17,6.5 C17,6.77614237 16.6828684,7 16.2916667,7 L0.708333322,7 C0.520471639,7 0.340304282,6.94732158 0.207466015,6.85355339 C0.074627748,6.75978519 0,6.63260823 0,6.5 L0,6.5 Z"
                          id="路径"
                        />
                        <path
                          d="M0,9.5 C0,9.36739177 0.074627748,9.24021481 0.207466015,9.14644661 C0.340304282,9.05267842 0.520471639,9 0.708333322,9 L16.2916667,9 C16.6828684,9 17,9.22385763 17,9.5 C17,9.77614237 16.6828684,10 16.2916667,10 L0.708333322,10 C0.31713163,10 0,9.77614238 0,9.5 L0,9.5 Z"
                          id="路径"
                        />
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
            </div>
            <div class="title-type">交付-无模板项目（漳县、水泥配送、煤炭供应链）</div>
            <div class="title-line"></div>
            <div class="title-workHour">
              <span class="title-normal-font">整体工时占比：</span>
              <span class="title-weight-font">{{
                                detailState.noTemplateDetail.overallWorkHourRatio
              }}</span>
              <a-tooltip :overlayStyle="overlayStyle">
                <template #title>交付无模板推广项目投入总工时/全部项目工时投入(已排除其他日报工时)</template>
                <ExclamationCircleOutlined style="margin-left: 4px" />
              </a-tooltip>
            </div>
            <div class="title-score">
              <span class="title-normal-font">无模板项目最终绩效分数：</span>
              <span class="title-weight-font">{{ detailState.noTemplateDetail.performanceScore }}分</span>
            </div>
            <div class="title-performance">
              <span class="title-normal-font">最终绩效分数：</span>
              <span class="title-weight-font blue-font">{{ detailState.noTemplateDetail.templateProjectFinalPerformance }}分</span>
              <a-tooltip :overlayStyle="overlayStyle">
                <template #title>整体工时占比*模板项目绩效分数</template>
                <ExclamationCircleOutlined style="margin-left: 4px" />
              </a-tooltip>
            </div>
          </div>
          <!--                            标题-->
          <!--                            内容-->
          <div
            class="template-content"
            v-if="
                            detailState.noTemplateDetail.ppmNoTemplatePerformanceDtoList &&
                            detailState.noTemplateDetail.ppmNoTemplatePerformanceDtoList.length > 0
                        "
          >
            <div class="template-content-title">
              <div class="title-normal-font">项目名称</div>
              <div class="title-normal-font">加减分</div>
              <div class="title-normal-font">此项目投入任务总工时(h) </div>
            </div>

            <a-collapse v-model:activeKey="detailState.noTemplateDetail.activeKey" :bordered="false" expandIconPosition="right">
              <template #expandIcon="{ isActive }">
                <DownSquareOutlined v-if="!isActive" style="font-size: 16px; color: #595959" />
                <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
              </template>
              <a-collapse-panel v-for="(item, index) in detailState.noTemplateDetail.ppmNoTemplatePerformanceDtoList" :key="index">
                <template #header>
                  <div class="template-collapse-title">
                    <a-tooltip>
                      <template #title>{{ item.projectName }} </template>
                      <div class="collapse-weight-font">
                        <span class="template-too-long">{{ item.projectName }}</span>
                      </div>
                    </a-tooltip>

                    <div v-if="item.scoreChange > 0" class="collapse-weight-font green-font">+{{ item.scoreChange }}</div>
                    <div v-else class="collapse-weight-font red-font">{{ item.scoreChange }}</div>
                    <div class="collapse-weight-font">{{ item.projectInputHours }}</div>
                  </div>
                </template>
                <div class="default-table">
                  <a-table :pagination="false" bordered :columns="noTemplateColumns" :data-source="item.noTemplateMilepostList" :scroll="{ y: 200 }" />
                </div>
              </a-collapse-panel>
            </a-collapse>
          </div>
          <!--                            内容-->
        </div>
        <!--                          无模板项目-->
        <!--                          行动项任务-->
        <div class="action-div">
          <!--                            标题-->
          <div class="action-title">
            <div class="action-title-img"></div>
            <div class="title-type">行动项任务</div>
            <div class="title-line"></div>
            <div class="title-workHour">
              <span class="title-normal-font">整体工时占比：</span>
              <span class="title-weight-font">{{ detailState.actionDetail.overallWorkHourRatio }}</span>
              <a-tooltip :overlayStyle="overlayStyle">
                <template #title>行动项任务投入总工时/全部项目工时投入(已排除其他日报工时)</template>
                <ExclamationCircleOutlined style="margin-left: 4px" />
              </a-tooltip>
            </div>
            <div class="title-score">
              <span class="title-normal-font">行动项任务最终绩效分数：</span>
              <span class="title-weight-font">{{ detailState.actionDetail.performanceScore }}分</span>
            </div>
            <div class="title-performance">
              <span class="title-normal-font">最终绩效分数：</span>
              <span class="title-weight-font blue-font">{{ detailState.actionDetail.actionTaskFinalPerformance }}分</span>
              <a-tooltip :overlayStyle="overlayStyle">
                <template #title>整体工时占比*行动项绩效分数</template>
                <ExclamationCircleOutlined style="margin-left: 4px" />
              </a-tooltip>
            </div>
          </div>
          <!--                            标题-->
          <!--                            内容-->
          <div
            class="default-content"
            v-if="
                            detailState.actionDetail.taskPerformanceDtoList &&
                            detailState.actionDetail.taskPerformanceDtoList.length > 0
                        "
          >
            <div class="default-table" style="margin: 0">
              <a-table :pagination="false" bordered :scroll="{ y: 200 }" :columns="actionColumns" :data-source="detailState.actionDetail.taskPerformanceDtoList">
                <template #bodyCell="{ column, record, text, index }">
                  <!--                       修正手动加减分               -->
                  <template v-if="column.dataIndex === 'scoreChangeNum'">
                    <div v-if="record.scoreChangeNum > 0" class="green-font">+{{ record.scoreChangeNum }}</div>
                    <div v-if="record.scoreChangeNum < 0" class="red-font">{{
                                            record.scoreChangeNum
                    }}</div>
                    <div v-if="record.scoreChangeNum === 0">+{{ record.scoreChangeNum }}</div>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
          <!--                            内容-->
        </div>
        <!--                          行动项任务-->
        <!--                          日报、全勤奖-->
        <div class="record-div">
          <!--                            标题-->
          <div class="record-title">
            <div class="record-title-img"></div>
            <div class="title-type">日报、全勤加减分明细</div>
            <div class="title-line"></div>
            <div class="title-performance">
              <span class="title-normal-font">最终绩效分数：</span>
              <span class="title-weight-font blue-font">{{ detailState.recordDetail.finalPerformanceScore }}分</span>
            </div>
          </div>
          <!--                            标题-->
          <!--                            内容-->
          <div
            class="default-content"
            v-if="
                            detailState.recordDetail.dailyPointsDtoList &&
                            detailState.recordDetail.dailyPointsDtoList.length > 0
                        "
          >
            <div class="default-table" style="margin: 0">
              <a-table :scroll="{ y: 200 }" bordered :pagination="false" :columns="recordColumns" :data-source="detailState.recordDetail.dailyPointsDtoList">
                <template #bodyCell="{ column, record, text, index }">
                  <template v-if="column.dataIndex === 'score'">
                    <div v-if="record.score > 0" class="green-font">+{{ record.score }}</div>
                    <div v-else class="red-font">{{ record.score }}</div>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
          <!--                            内容-->
        </div>
        <!--                          日报、全勤奖-->
        <!--                          月度修正-->
        <div class="correct-div">
          <!--                            标题-->
          <div class="correct-title">
            <div class="correct-title-img"></div>
            <div class="title-type">月度修正得分：</div>
            <span class="title-weight-font blue-font" style="margin-right: 12px">{{ detailState.peopleDetail.scoreChangesNum || 0 }}分</span>
            <div class="title-line"></div>
            <div class="title-performance">
              <span class="title-normal-font">原因：</span>
              <span class="title-normal-font">{{ detailState.peopleDetail.scoreChangesDetails }}</span>
            </div>
          </div>
          <!--                            标题-->
        </div>
        <!--                          月度修正-->
        <!--                          非目标项目-->
        <div class="record-div">
          <!--                            标题-->
          <div class="record-title">
            <div class="no-title-img">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23px" height="23.76px" viewBox="0 0 23 23.76" version="1.1">
                <title>非目标项目任务</title>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="我的详情" transform="translate(-474.5, -1143)">
                    <g id="非目标项目任务" transform="translate(474, 1143)">
                      <rect id="矩形" x="0" y="0" width="24" height="24" />
                      <g id="编组" transform="translate(0.5, 0)" fill-rule="nonzero">
                        <path
                          d="M4.75862068,0.76 L18.2413793,0.76 C21.4137931,0.76 23,2.34620689 23,5.51862067 L23,19.0013793 C23,22.1737931 21.4137931,23.76 18.2413793,23.76 L4.75862068,23.76 C1.58620687,23.76 0,22.1737931 0,19.0013793 L0,5.51862067 C0,2.34620687 1.58620689,0.76 4.75862068,0.76 Z"
                          id="路径"
                          fill="#366DEB"
                        />
                        <path
                          d="M4.75862068,0 L18.2413793,0 C21.4137931,0 23,1.70399999 23,5.11199998 L23,17.892 C23,21.3 21.4137931,23.004 18.2413793,23.004 L4.75862068,23.004 C1.58620687,23.004 0,21.3 0,17.892 L0,5.11199998 C0,1.70399997 1.58620689,0 4.75862068,0 Z"
                          id="路径"
                          fill="#6896FF"
                        />
                        <g id="编组-44" transform="translate(2.16, 2.16)" fill="#FFFFFF">
                          <path
                            d="M16.2288,0 C17.9360226,0 19.32,1.43268879 19.32,3.19999998 L19.32,15.2 C19.32,16.9673112 17.9360226,18.4 16.2288,18.4 L3.0912,18.4 C1.38397738,18.4 0,16.9673112 0,15.2 L0,3.19999998 C0,1.43268879 1.38397739,0 3.0912,0 L16.2288,0 L16.2288,0 Z M16.2288,1.6 L3.0912,1.6 C2.2375887,1.6 1.5456,2.31634439 1.5456,3.19999998 L1.5456,15.2 C1.5456,16.0836556 2.23758869,16.8 3.0912,16.8 L16.2288,16.8 C17.0824113,16.8 17.7744,16.0836556 17.7744,15.2 L17.7744,3.19999998 C17.7744,2.31634439 17.0824113,1.6 16.2288,1.6 L16.2288,1.6 Z"
                            id="形状"
                          />
                          <path
                            d="M12.42,3.68 C14.1983569,3.68 15.64,5.0922218 15.64,6.83428569 L15.64,11.5657143 C15.64,13.3077782 14.1983569,14.72 12.42,14.72 L5.98,14.72 C4.20164311,14.72 2.76,13.3077782 2.76,11.5657143 L2.76,6.83428569 C2.76,5.0922218 4.20164312,3.68 5.98,3.68 L12.42,3.68 L12.42,3.68 Z M12.42,5.25714286 L5.98,5.25714286 C5.09082156,5.25714286 4.37,5.96325375 4.37,6.83428569 L4.37,11.5657143 C4.37,12.4367462 5.09082155,13.1428571 5.98,13.1428571 L12.42,13.1428571 C13.3091784,13.1428571 14.03,12.4367462 14.03,11.5657143 L14.03,6.83428569 C14.03,5.96325375 13.3091784,5.25714286 12.42,5.25714286 L12.42,5.25714286 Z"
                            id="形状"
                          />
                          <path
                            d="M8.09599999,8.28 L10.304,8.28 C10.7946667,8.28 11.04,8.51 11.04,8.96999999 L11.04,10.35 C11.04,10.81 10.7946667,11.04 10.304,11.04 L8.09599999,11.04 C7.60533333,11.04 7.36,10.81 7.36,10.35 L7.36,8.96999999 C7.36,8.51 7.60533333,8.28 8.09599999,8.28 Z"
                            id="路径"
                          />
                        </g>
                        <polygon
                          id="路径"
                          fill="#0A3E47"
                          opacity="0.2"
                          points="14.6589802 5.36 15.5761581 8.18086009 23 6.15973687 23 10.842266 16.9156456 12.5547549 17.5694915 15.48 11.04 11.6794006"
                        />
                        <polygon
                          id="路径"
                          fill="#1250DB"
                          points="11.04 11.96 11.04 4.90057044 13.1732361 6.81690578 19.9444764 3.06954462e-14 23 3.08203974 16.4115519 9.82777873 18.3738912 11.9596024"
                        />
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
            </div>
            <div class="title-type">非目标项目任务</div>
            <div class="title-line"></div>
            <div class="title-performance">
              工时:
              <span class="title-weight-font blue-font">{{
                                reasonState.noTargetData.performanceScore
              }}</span>
            </div>
          </div>
          <!--                            标题-->
          <!--                            内容-->
          <div
            class="default-content"
            v-if="
                            reasonState.noTargetData.taskPerformanceDtoList &&
                            reasonState.noTargetData.taskPerformanceDtoList.length > 0
                        "
          >
            <div class="default-table" style="margin: 0">
              <a-table :scroll="{ y: 200 }" bordered :pagination="false" :columns="reasonState.noTargetColumns" :data-source="reasonState.noTargetData.taskPerformanceDtoList">
                <template #bodyCell="{ column, record, text, index }">
                  <template v-if="column.dataIndex === 'score'">
                    <div v-if="record.score > 0" class="green-font">+{{ record.score }}</div>
                    <div v-else class="red-font">{{ record.score }}</div>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
          <!--                            内容-->
        </div>
        <!--                          非目标项目-->
      </div>
      <!-- end vid_rcfj0qms3u 自定义模板_05pakhlynd -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  onMounted(() => {
          // const lastMonth = dayjs().subtract(1, 'month')
          // ygState.dateStr = lastMonth.format('YYYY年MM月')
          detailState.detailDate = dayjs(new Date()).format('YYYY-MM')
          getPtDetail(null, null)
      })
      const ygState = reactive({
          expandedKeys: [],
          selectedKeys: [],
          checkedKeys: [],
          searchValue: '',
          dateStr: '',
          filter: {
              projectName: undefined,
              month: undefined
          },
          treeData: [],
          selected: {},
          projectNameList: [],
          tableData: [],
          selectedRowKeys: [],
          exportScoreVisible: false,
          addOrReduceVisible: false,
          fileList: [],
          staffType: 'DEPARTMENT'
      })
      const detailState = reactive({
          detailDate: '',
          dateStr: '',
          //   个人信息部分,
          peopleDetail: {
              userName: '',
              taskNum: '',
              projectNum: '',
              goalsNum: '',
              fraction: '',
              finalPerformanceScore: '',
              departmentName: '',
              goalsReportHourInput: '',
              otherDailyHourInput: ''
          },
          //   平台数据
          defaultDetail: {
              activeKey: [],
              dataSource: [],
              finalPerformanceScore: '',
              overallWorkHourRatio: '',
              performanceScore: ''
          },
          //     模板数据
          templateDetail: {
              activeKey: [],
              dataSource: []
          },
          // 日报全勤奖数据
          recordDetail: {
              dataSource: []
          },
          //     xdx人数据
          actionDetail: {
              dataSource: []
          },
          noTemplateDetail: {}
      })
      const defaultColumns = ref([
          {
              title: '项目阶段',
              dataIndex: 'projectMilepost',
              align: 'left',
              ellipsis: true,
              width: 205,
              customCell: item => {
                  const { rowIndex, rowSpan } = item
                  return {
                      rowSpan: rowSpan
                  }
              }
          },
          {
              title: '任务名称',
              dataIndex: 'taskName',
              width: 284,
              align: 'left',
              ellipsis: true,
              customCell: item => {
                  const { rowIndex, rowSpan } = item
                  return {
                      style: {
                          borderLeft: 'none'
                      }
                  }
              }
          },
          { title: '任务负责人', dataIndex: 'taskOwner', width: 103, align: 'left', ellipsis: true },
          { title: '任务执行人', dataIndex: 'taskParticipants', width: 261, align: 'left', ellipsis: true },
          { title: '任务完成情况', dataIndex: 'taskStatus', width: 117, align: 'center', ellipsis: true },
          { title: '任务目标分数', dataIndex: 'taskFraction', width: 120, align: 'center', ellipsis: true },
          { title: '任务得分情况', dataIndex: 'taskScore', width: 120, align: 'center', ellipsis: true },
          { title: '投入工时(h)', dataIndex: 'taskHourInput', width: 120, align: 'center', ellipsis: true }
      ])
      const templateColumns = ref([
          {
              title: '项目阶段',
              dataIndex: 'projectMilepost',
              align: 'left',
              ellipsis: true,
              width: 205,
              customCell: item => {
                  const { rowIndex, rowSpan } = item
                  return {
                      rowSpan: rowSpan
                  }
              }
          },
          {
              title: '任务名称',
              dataIndex: 'taskName',
              width: 348,
              align: 'left',
              ellipsis: true,
              customCell: item => {
                  const { rowIndex, rowSpan } = item
                  return {
                      style: {
                          borderLeft: 'none'
                      }
                  }
              }
          },
          { title: '任务完成情况', dataIndex: 'taskStatus', width: 225, align: 'center', ellipsis: true },
          { title: '绩效加减分', dataIndex: 'scoreChangeNum', width: 150, align: 'center', ellipsis: true },
          { title: '加减分原因', dataIndex: 'pointTypeName', width: 157, align: 'center', ellipsis: true },
          { title: '投入工时(h)', dataIndex: 'workHours', width: 200, align: 'center', ellipsis: true }
      ])
      const recordColumns = ref([
          { title: '工时对应时间', dataIndex: 'dailyDate', width: 300, align: 'center', ellipsis: true },
          { title: '触发时间', dataIndex: 'triggerTime', width: 300, align: 'center', ellipsis: true },
          { title: '触发分数', dataIndex: 'score', width: 300, align: 'center', ellipsis: true },
          { title: '原因', dataIndex: 'reason', width: 300, align: 'center', ellipsis: true }
      ])
      const actionColumns = ref([
          { title: '行动项任务名称', dataIndex: 'actionTaskName', width: 500, align: 'left', ellipsis: true },
          { title: '行动项任务完成情况', dataIndex: 'taskStatus', align: 'center', ellipsis: true },
          { title: '加减分', dataIndex: 'scoreChangeNum', align: 'center', ellipsis: true },
          { title: '加减分原因', dataIndex: 'pointTypeName', align: 'center', ellipsis: true },
          { title: '投入工时', dataIndex: 'workHours', align: 'center', ellipsis: true }
      ])

      // 获取平台、交付
      function getPtDetail(id, name) {
          const params = {
              id: id,
              name: name,
              month: detailState.detailDate
          }
          post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/goals_list`, params).then(data => {
              if (data.code === 200) {
                  data.data.employeeMonthlyGoalsDtoList = formatData(data.data.employeeMonthlyGoalsDtoList)
                  detailState.defaultDetail = data.data
                  getPeopleDetail(null, null)
              } else {
                  message.error(data.message)
                  detailState.defaultDetail = {}
              }
          })
      }
      // 个人信息
      function getPeopleDetail(id, name) {
          const params = {
              id: id,
              name: name,
              month: detailState.detailDate
          }
          post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/performance`, params).then(data => {
              if (data.code === 200) {
                  detailState.peopleDetail = data.data
                  getTemplateDetail(null, null)
              } else {
                  message.error(data.message)
                  detailState.peopleDetail = {}
              }
          })
      }
      // 模板项目详情
      function getTemplateDetail(id, name) {
          const params = {
              id: id,
              name: name,
              month: detailState.detailDate
          }
          post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/template_goals_list`, params).then(data => {
              if (data.code === 200) {
                  data.data.templateProjectPerformanceDtoList.taskDtoList = formatData(
                      data.data.templateProjectPerformanceDtoList
                  )
                  detailState.templateDetail = data.data
                  getActionDetail(null, null)
              } else {
                  message.error(data.message)
                  detailState.templateDetail = {}
              }
          })
      }
      function formatData(data) {
          return data.map(project => {
              project.taskDtoList = groupMilepostData(project.taskDtoList)
              return project
          })
      }
      // 行动项项目详情
      function getActionDetail(id, name) {
          const params = {
              id: id,
              name: name,
              month: detailState.detailDate
          }
          post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/action_task_list`, params).then(data => {
              if (data.code === 200) {
                  data.data.taskPerformanceDtoList = data.data.taskPerformanceDtoList
                  detailState.actionDetail = data.data
                  getRecordDetail(null, null)
              } else {
                  message.error(data.message)
                  detailState.actionDetail = {}
              }
          })
      }
      // 日报详情
      function getRecordDetail(id, name) {
          const params = {
              id: id,
              name: name,
              month: detailState.detailDate
          }
          post('/solution-ppm/api/v2/built-in-system-ppm/emgf/daily_list', params).then(data => {
              if (data.code === 200) {
                  detailState.recordDetail = data.data
                  getNoTemplateDetail(null, null)
              } else {
                  message.error(data.message)
                  detailState.recordDetail = {}
              }
          })
      }
      // 无模板项目详情
      function getNoTemplateDetail(id, name) {
          const params = {
              id: id,
              name: name,
              month: detailState.detailDate
          }
          post('/solution-ppm/api/v2/built-in-system-ppm/emgf/no_template_goals_list', params).then(data => {
              if (data.code === 200) {
                  detailState.noTemplateDetail = data.data
                  getNoTargetDetail(null, null)
              } else {
                  detailState.noTemplateDetail = {}
              }
          })
      }
      // 非目标项目任务
      function getNoTargetDetail(id, name) {
          const params = {
              id: id,
              name: name,
              month: detailState.detailDate
          }
          post('/solution-ppm/api/v2/built-in-system-ppm/emgf/problem_task_list', params).then(data => {
              if (data.code === 200) {
                  reasonState.noTargetData = data.data
              } else {
                  reasonState.noTargetData = {}
              }
          })
      }
      const noTemplateColumns = ref([
          {
              title: '项目阶段',
              dataIndex: 'milepostName',
              align: 'left',
              ellipsis: true,
              width: 205,
              customCell: item => {
                  const { rowIndex, rowSpan } = item
                  return {
                      rowSpan: rowSpan
                  }
              }
          },
          { title: '项目阶段完成情况', dataIndex: 'milepostStatus', width: 225, align: 'center', ellipsis: true },
          { title: '绩效加减分', dataIndex: 'scoreChangeNum', width: 150, align: 'center', ellipsis: true },
          { title: '加减分原因', dataIndex: 'pointTypeName', width: 157, align: 'center', ellipsis: true },
          { title: '投入工时(h)', dataIndex: 'workHours', width: 200, align: 'center', ellipsis: true }
      ])
      // 格式化
      function groupData(data) {
          let currentProjectName = ''
          return data.map((item, index) => {
              if (currentProjectName !== item.projectName) {
                  currentProjectName = item.projectName
                  let rowSpan = 0
                  for (let i = 0; i < data.length; i++) {
                      if (i >= index) {
                          if (currentProjectName === data[i].projectName) {
                              rowSpan += 1
                          } else {
                              break
                          }
                      }
                  }
                  item.rowSpan = rowSpan
              } else {
                  item.rowSpan = 0
              }
              return item
          })
      }
      // 格式化
      function groupMilepostData(data) {
          let currentProjectMilepost = ''
          return data.map((item, index) => {
              if (currentProjectMilepost !== item.projectMilepost) {
                  currentProjectMilepost = item.projectMilepost
                  let rowSpan = 0
                  for (let i = 0; i < data.length; i++) {
                      if (i >= index) {
                          if (currentProjectMilepost === data[i].projectMilepost) {
                              rowSpan += 1
                          } else {
                              break
                          }
                      }
                  }
                  item.rowSpan = rowSpan
              } else {
                  item.rowSpan = 0
              }
              return item
          })
      }
      watch(
          () => detailState.detailDate,
          () => {
              if (detailState.detailDate) {
                  const formattedDate = dayjs(detailState.detailDate, 'YYYY-MM').format('YYYY年MM月')
                  ygState.dateStr = formattedDate
              }
          },
          { deep: true }
      )
      function handlerChangeDate(date) {
          getPtDetail(null, null)
      }
      const disabledDate = current => {
          // 获取当前日期的年月
          const currentYearMonth = dayjs(current).format('YYYY-MM')
          // 获取今天的年月
          const todayYearMonth = dayjs().format('YYYY-MM')
          // 禁用当月及以后的月份
          return currentYearMonth > todayYearMonth
      }
      const reasonState = reactive({
          visible: false,
          totalDeductFraction: '',
          correctFraction: '',
          columns: [
              {
                  title: '项目阶段',
                  dataIndex: 'milepostName',
                  align: 'left',
                  ellipsis: true,
                  width: 205
              },
              {
                  title: '任务名称',
                  dataIndex: 'taskName',
                  width: 348,
                  align: 'left',
                  ellipsis: true
              },
              {
                  title: '加减分',
                  dataIndex: 'taskPerformanceWeight',
                  align: 'center',
                  ellipsis: true
              }
          ],
          isSelfData: [],
          otherData: [],
          noTargetColumns: [
              {
                  title: '项目名称',
                  dataIndex: 'projectName',
                  align: 'left',
                  ellipsis: true,
                  width: 205
              },
              {
                  title: '项目阶段名称',
                  dataIndex: 'milepostName',
                  align: 'left',
                  ellipsis: true,
                  width: 205
              },
              {
                  title: '任务名称',
                  dataIndex: 'taskName',
                  width: 348,
                  align: 'left',
                  ellipsis: true
              },
              {
                  title: '项目经理',
                  dataIndex: 'pmName',
                  align: 'left',
                  ellipsis: true
              },
              {
                  title: '产品经理',
                  dataIndex: 'productName',
                  align: 'left',
                  ellipsis: true
              },
              {
                  title: '计划完成时间',
                  dataIndex: 'endTime',
                  align: 'left',
                  ellipsis: true,
                  width: 205
              },
              {
                  title: '投入工时',
                  dataIndex: 'workHoursInput',
                  align: 'center',
                  ellipsis: true
              }
          ],
          noTargetData: {}
      })
      function getScoreReason(id) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/emgf/goal/${id}`).then(data => {
              reasonState.isSelfData = data.data.unRelatedTaskList
              reasonState.otherData = data.data.unFinishTaskList
              reasonState.totalDeductFraction = data.data.totalDeductFraction
              reasonState.correctFraction = data.data.correctFraction
              reasonState.visible = true
          })
      }
      function getClass(score) {
          let baseClass = 'collapse-weight-font'
          let additionalClass = ''

          if (score < 100) {
              additionalClass = 'warn-score'
          } else if (score === 100) {
              additionalClass = 'normal-score'
          } else if (score > 100) {
              additionalClass = 'good-score'
          }

          return [baseClass, additionalClass]
      }
      function isCurrentMonth() {
        return dayjs(detailState.detailDate).isSame(dayjs(), 'month');
      }
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  .jx-detail {
          height: 100%;
          min-height: 800px;
          overflow: auto;
      }

      .left-tree {
          padding: 16px 24px;
      }

      .tree-title {
          display: inline-block;
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
          margin-bottom: 12px;
      }

      .right-div {
          padding: 20px 24px;
      }

      .right-title {
          display: inline-block;
          font-size: 18px;
          color: #3875ff;
          font-weight: 600;
          margin-bottom: 12px;
      }

      .row-size {
          height: 32px;
          margin-bottom: 12px;
      }

      .ant-btn-primary {
          color: #3875ff;
          border-color: #3875ff;
      }

      .yg-table :deep(.@{ant-prefix}-table-thead) > tr {
          height: 40px;
      }

      .yg-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 600;
          color: #ffffff;
          border-bottom: 1px solid #3875ff;
          padding: 8px 16px;
      }
      .yg-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 16px;
          word-break: break-all;

          .cell-wrapper {
              padding: 0 16px;
          }
      }
      .export-title {
          width: 532px;
          height: 61px;
          background: rgba(56, 117, 255, 0.1);
          padding: 8px 16px;
          font-size: 14px;
          color: #262626;
          text-align: justify;
          line-height: 22px;
          font-weight: 400;
          display: flex;
          margin-bottom: 12px;
      }

      .export-content {
          display: inline-block;
          margin-left: 8px;
      }

      /*绩效详情*/
      .detail-top {
          height: 64px;
          border-radius: 2px;
          background-color: #fff;
          padding: 19px 24px;
          display: flex;
          margin-bottom: 16px;
      }

      .detail-title {
          font-size: 18px;
          color: #262626;
          font-weight: 600;
      }

      .detail-msg {
          background: #ffffff;
          border-radius: 2px;
          height: 150px;
          padding: 16px 24px;
          display: flex;
      }

      .detail-name {
          display: flex;
          flex-direction: column;
          margin-left: 24px;
      }

      .avatar {
          margin: 9px 0;
          width: 60px;
      }

      .people-name {
          min-height: 50%;
          font-size: 24px;
          color: #1d2129;
          letter-spacing: 0;
          font-weight: 600;
          margin-right: 11px;
      }

      .department-title {
          font-size: 14px;
          color: #1d2129;
          letter-spacing: 0;
          font-weight: 600;
      }

      .normal-font {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
          margin-right: 8px;
      }

      .weight-font {
          font-size: 20px;
          color: #262626;
          letter-spacing: 0;
          line-height: 28px;
          font-weight: 600;
      }

      .color-font {
          color: #3875ff;
      }

      .other {
          flex: 1;
          display: flex;
          flex-direction: column;
      }

      .other-top,
      .other-bottom {
          height: 50%;
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
          display: flex;
      }

      .other-bottom span {
          bottom: 0;
      }

      .other-bottom-item,
      .other-top-item {
          flex: 1;
      }

      .unit-font {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          line-height: 28px;
          font-weight: 600;
      }

      .end-font {
          font-size: 20px;
          color: #6f6f6f;
          letter-spacing: 0;
          line-height: 28px;
          font-weight: 600;
      }

      :deep(.ant3-collapse-header) {
          padding: 0 !important;
          border: none !important;
      }

      :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
          padding: 0 !important;
      }

      :deep(.ant3-collapse-item) {
          margin-bottom: 8px;
      }

      :deep(.ant3-collapse-icon-position-right > .ant3-collapse-item > .ant3-collapse-header) {
          border-radius: 4px;
          color: #3875ff;
          border-color: #3875ff !important;
      }

      .expand {
          width: 30px;
          font-size: 14px;
          color: #3875ff;
          letter-spacing: 0;
          font-weight: 400;
          margin-right: 30px;
          line-height: 40px;
      }

      /*
  default-div平台、市场、交付-通用项目
  */
      .default-div,
      .template-div,
      .record-div,
      .correct-div,
      .action-div {
          margin-top: 16px;
          background: #ffffff;
          border-radius: 2px;
      }

      .record-div {
      }

      .correct-div {
      }

      .default-title,
      .template-title,
      .record-title,
      .correct-title,
      .action-title {
          padding: 13px 24px;
          background-image: linear-gradient(270deg, rgba(105, 173, 255, 0) 0%, rgba(56, 117, 255, 0.15) 100%);
          border-radius: 2px 2px 0 0;
          height: 48px;
          display: flex;
          line-height: 24px;
      }

      .default-content,
      .template-content {
          padding: 16px 24px;
      }

      .default-title-img {
          background-image: url('@/assets/images/9d2f172c48ba8fea7233514567490796.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .template-title-img {
          background-image: url('@/assets/images/324c18e84aed5386686ef288e3166bef.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .record-title-img {
          background-image: url('@/assets/images/ae2b2b6f4cd353f1a9f6ed8e411bad03.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .correct-title-img {
          background-image: url('@/assets/images/5f7efdcb05121b63c9d19506f01a50cb.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .action-title-img {
          background-image: url('@/assets/images/f404915fb146dc633d9e835870078f88.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .title-type {
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #3875ff;
          letter-spacing: 0;
          font-weight: 600;
          margin-right: 12px;
      }

      .title-workHour {
          margin-right: 16px;
      }

      .title-line {
          height: 14px;
          width: 1px;
          background-color: #595959;
          margin-right: 12px;
          margin-top: 6px;
      }

      .title-weight-font {
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
      }

      .title-normal-font {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
      }

      .title-score {
          margin-right: 16px;
      }

      /*default-div平台、市场、交付-通用项目*/
      .content-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          display: grid;
          grid-template-columns: 1.3fr repeat(6, 1fr);
          /* 根据需要调整列数 */
      }

      .collapse-title {
          background: #fbfcff;
          border-radius: 4px;
          height: 40px;
          border: 1px solid #3875ff;
          width: 100%;
          display: grid;
          grid-template-columns: 1.3fr repeat(6, 1fr);
          /* 根据需要调整列数 */
      }

      .collapse-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      .collapse-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 16px;
      }

      .collapse-title div:nth-child(n + 2),
      .content-title div:nth-child(n + 2) {
          margin-right: 25px;
      }

      .collapse-title div:last-child {
          margin-right: 35px;
      }

      .content-title div:last-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-right: 35px;
      }

      .content-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 16px;
      }

      .content-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      :deep(.ant3-collapse-borderless > .ant3-collapse-item) {
          border: none;
      }

      :deep(.ant3-collapse-content-box) {
          background-color: #fff !important;
      }

      .collapse-weight-font {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
      }

      .too-long,
      .template-too-long,
      .action-too-long {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;
          width: 210px;
      }

      .template-too-long {
          width: 300px;
      }

      .action-too-long {
          width: 250px;
      }

      .default-table {
          margin-top: 12px;
          margin-bottom: 12px;
      }

      .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #f7f7f7;
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 600;
          color: #262626;
          border-bottom: 1px solid #d9d9d9;
          padding: 8px 16px;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr:not(:last-child)
          > th {
          border-bottom: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th {
          border-right: 1px solid #d9d9d9;
      }

      /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
      .default-table :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
          border-left: none;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th[colstart='0']:first-child {
          border-left: 1px solid #d9d9d9;
      }

      /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-header
          table {
          border-top: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          > .@{ant-prefix}-table-content
          > table {
          border-top: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table-thead)
          > tr
          > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
              .@{ant-prefix}-table-row-expand-icon-cell
          ):not([colspan])::before {
          background: #d9d9d9;
          width: 1px;
      }

      /*表格*/
      .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #595959;
          border-bottom: 1px solid #d9d9d9;
          padding: 8px 16px;
          word-break: break-all;

          .cell-wrapper {
              padding: 0 16px;
          }
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-tbody
          tr
          > td {
          border-right: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-tbody
          tr
          > td:first-child {
          border-left: 1px solid #d9d9d9;
      }

      /*行动项任务*/
      /*default-div平台、市场、交付-通用项目*/
      .action-content-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          display: grid;
          grid-template-columns: 1.3fr repeat(5, 1fr);
          /* 根据需要调整列数 */
          gap: 10px;
          /* 根据需要调整间距 */
      }

      .action-collapse-title {
          background: #fbfcff;
          border-radius: 4px;
          height: 40px;
          border: 1px solid #3875ff;
          width: 100%;
          display: grid;
          grid-template-columns: 1.3fr repeat(5, 1fr);
          /* 根据需要调整列数 */
          gap: 10px;
          /* 根据需要调整间距 */
      }

      .action-collapse-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      .action-collapse-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 16px;
      }

      .action-content-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 16px;
      }

      .action-content-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      /*模板任务*/
      /*default-div平台、市场、交付-通用项目*/
      .template-content-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          display: grid;
          grid-template-columns: 2.1fr repeat(5, 1fr);
          /* 根据需要调整列数 */
          gap: 10px;
          /* 根据需要调整间距 */
      }

      .template-collapse-title {
          background: #fbfcff;
          border-radius: 4px;
          height: 40px;
          border: 1px solid #3875ff;
          width: 100%;
          display: grid;
          grid-template-columns: 2.1fr repeat(5, 1fr);
          /* 根据需要调整列数 */
          gap: 10px;
          /* 根据需要调整间距 */
      }

      .template-collapse-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      .template-collapse-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 48px;
      }

      .template-content-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 48px;
      }

      .template-content-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }
      .green-num,
      .red-num,
      .default-num {
          width: 50px;
          height: 20px;
          border-radius: 2px;
          line-height: 20px;
          margin: 0 auto;
      }
      .green-num {
          background: rgba(82, 196, 26, 0.1);
          border: 1px solid #52c41a;
          color: #52c41a;
      }
      .red-num {
          background: rgba(245, 34, 45, 0.1);
          border: 1px solid #f5222d;
          color: #f5222d;
      }
      .default-num {
          background: rgba(38, 38, 38, 0.1);
          border: 1px solid #bfbfbf;
          color: #262626;
      }
      :deep(.table-striped) td {
          background-color: #f8fafc;
      }
      .blue-font {
          color: #3875ff;
      }
      .red-font {
          color: #f5222d;
      }
      .green-font {
          color: #52c41a;
      }
      .no-template-title-img {
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }
      .warn-score {
          color: red;
      }
      .good-score {
          color: #52c41a;
      }
      .normal-score {
          pointer-events: none; /* 禁止所有的鼠标和指针事件 */
          cursor: not-allowed; /* 鼠标指针显示为不允许的样式 */
      }
      .detail-top-title {
          display: flex;
          height: 30px;
          border-bottom: 1px solid #9bbaff;
      }
      .detail-first {
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #262626;
          font-weight: 400;
      }
      .red-weight {
          font-size: 18px;
          color: #f5222d;
          font-weight: 600;
          margin-right: 24px;
      }
      .detail-second {
          font-size: 16px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
      }
      .litter {
          font-size: 16px;
      }
      .detail-item {
          border-left: 4px solid #3875ff;
          padding-left: 8px;
          margin-top: 15px;
          height: 16px;
          line-height: 16px;
          margin-bottom: 12px;
      }
      .no-title-img {
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }
      .title-tip {
          font-size: 14px;
          color: #1d2129;
          letter-spacing: 0;
      }
      .user-img {
          width: 16px;
          height: 16px;
          display: inline-block;
          position: relative;
          top: 5px;
          cursor: pointer;
      }
      .other-bottom {
          position: relative;
          top: 10px;
      }
     .other-middle {
        height: 40px;
        background-color: #fef4d9;
        line-height: 40px;
        padding-left: 16px;
        color: #262626;
      }
    .short{
        height: 110px;
      }
</style>